<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background: skyblue;
            cursor: move;


        }
       

        #box .right {
            width: 10px;
            height: 20px;
            position: absolute;
            right: -10px;
            background-color: red;
            /* opacity: 0; */
        }

        .bottom {
            width: 20px;
            height: 10px;
            position: absolute;
            right: 0;
            bottom: -10px;
            background-color: green;
            opacity: 0;

        }


        .right {
            cursor: col-resize;

        }

        .bottom {
            cursor: row-resize;

        }




        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <button id="btn">11111</button>
    <div id="box">
1111111
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
  
    <script>
        let el = document.getElementById('box')
        el.addEventListener('mousedown', (event) => {
            let startX = event.clientX,
                startY = event.clientY,
                left = el.offsetLeft,
                top = el.offsetTop
            let moveFun = (event) => {
                let X = event.clientX - startX
                let Y = event.clientY - startY
                el.style.left = `${left + X}px`
                el.style.top = `${top + Y}px`
            }
            document.addEventListener('mousemove', moveFun)
            el.addEventListener('mouseup', () => {
                document.removeEventListener('mousemove', moveFun)
            })

        })

        let right = document.querySelector('.right')
        right.addEventListener('mousedown', (e) => {
            e.stopPropagation()

            let left = document.querySelector('#box');
            let middle = document.querySelector('.right');

            middle.onmousedown = function (e) {
            console.log(11111);

                var disX = (e || event).clientX;
                middle.left = middle.offsetLeft;
                document.onmousemove = function (e) {
                    let middleLeft = middle.left + ((e || event).clientX - disX);
                    let maxWidth = document.body.clientWidth;
                    middleLeft < 0 && (middleLeft = 0);
                    middleLeft > maxWidth && (middleLeft = maxWidth);
                    middle.style.left = left.style.width = middleLeft + 'px';
                    middle.style.left = middleLeft + 'px';

                    return false;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    middle.releaseCapture && middle.releaseCapture();
                };
                middle.setCapture && middle.setCapture();
                return false;
            }
        })

        let bottom = document.querySelector('.bottom')
        bottom.addEventListener('mousedown', (e) => {
            e.stopPropagation()

            let left = document.querySelector('#box');
            let middle = document.querySelector('.bottom');

            middle.onmousedown = function (e) {
                var disY = (e || event).clientY;
                middle.top = middle.offsetTop;
                document.onmousemove = function (e) {
                    let middleTop = middle.top + ((e || event).clientY - disY);
                    let maxHeight = document.body.clientHeight;
                    middleTop < 0 && (middleTop = 0);
                    middleTop > maxHeight && (middleTop = maxHeight);
                    middle.style.top = left.style.height = middleTop + 'px';
                    middle.style.top = middleTop + 'px';

                    return false;
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    middle.releaseCapture && middle.releaseCapture();
                };
                middle.setCapture && middle.setCapture();
                return false;
            }
        })






        let btn = document.querySelector('#btn')
        btn.addEventListener('click', function (e) {
            console.log('el: ', el.style.top);
            console.log('el: ', el.style.left);
        })

    </script>
</body>

</html>